<template>
	<div class="view">
		<Modal v-model="data.modalShow" :mask-closable="false">
			<p slot="header">
				<span>用户充值</span>
			</p>
			<div style="padding: 10px;">
				<Form ref="form" :model="data" :rules="ruleValidate" :label-width="100">
					<FormItem label="用户" prop="userName" >
						<Input v-model="data.userName" :maxlength="24" style="width: 200px;"/>
					</FormItem>
					<FormItem label="金币个数" prop="rechargeNum">
						<InputNumber :min="1" :max="99999999" v-model="data.rechargeNum" style="width: 100px;" placeholder="金币"/>
					</FormItem>
				</Form>
			</div>
			<div slot="footer">
				<Button
					type="primary"
					size="large"
					:loading="data.isSubmitLoading"
					@click="handleSubmit()">
					充值
				</Button>
			</div>
		</Modal>
	</div>
</template>

<script>
export default {
	name: 'UserRechargeModal',
	props: ['data'],
	data () {
		return {
			ruleValidate: {
				rechargeNum: [
                    { type: 'number', required: true, message: '请输入金币个数', trigger: 'change' }
                ],
			}
		}
	},
	mounted() {
	},
	methods: {
		handleSubmit () {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.$emit('on-submit-action', this.data);
				} else {
					this.$Message.error('表单验证失败!');
				}
			})
		}
	}
}
</script>

<style scoped lang="less">
.view {
	
}
</style>
